import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import ProductOverview from "./components/ProductOverview";
// import ShopInfo from "./components/ShopInfo";
import Detail from "./components/Detail";
import Remark from "./components/Remark";
import BuyButton from "./components/BuyButton";
import Header from "../../components/Header";
import {
  actions as detailActions,
  // getProduct,
  getRelatedShop
} from "../../redux/modules/detail";


class ProductDetail extends Component {
  render() {
    console.log("加载详情页")
    console.log(this.props)
    const product = this.props.product;
    // const { product, relatedShop } = this.props;
    return (
      <div>
        <Header title="团购详情" onBack={this.handleBack} grey />
        {product && <ProductOverview data={product} />}
        {/* {relatedShop && (
          <ShopInfo data={relatedShop} total={product.shopIds.length} />
        )} */}
        {product && (
          <div>
            <Detail data={product} />
            <Remark data={product} />
            <BuyButton productId={product.id} />
          </div>
        )}
      </div>
    );
  }

  componentDidMount() {
    const productId = this.props.match.params.id;
    console.log("componentDidMount")
    console.log(productId)
    this.props.detailActions.loadProductDetail(productId);
  }
  
  // componentDidUpdate(preProps) {
  //   // 第一次获取到产品详情时，需要继续获取关联的店铺信息
  //   console.log("componentDidUpdate")
  //   if (!preProps.product && this.props.match.product) {
  //     console.log("componentDidUpdated")
  //   }
  // }

  handleBack = () => {
    this.props.history.goBack();
  };
}

const mapStateToProps = (state, props) => {
  const productId = props.match.params.id;
  console.log("mapStateToProps")
  console.log(state)
  console.log(state.entities.products)
  return {
    product: state.entities.products[productId],
    relatedShop: getRelatedShop(state, productId)
  };
};

const mapDispatchToProps = dispatch => {
  console.log("mapDispatchToProps")
  return {
    detailActions: bindActionCreators(detailActions, dispatch)
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductDetail);
